<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1 v-bind:title="title">{{ msg | capitalize | limit(10)}}</h1>
    <h1 v-bind:title="title">{{ reversedMessage | capitalize | limit(10)}}</h1>

    <div v-bind:title="'xxxx-'+title | capitalize">{{title}}</div>
    <ul>
      <template v-for="(item, index) of list" v-if="item.show">
        <li v-if="item.red"> red: {{item.text}}-{{index}}</li>
        <li v-else> : {{item.text}}-{{index}}</li>
        <li class="divider">show....</li>
      </template>
    </ul>
    <ul>
		  <li v-for="(value, key, index) in objects"> {{value}}-{{key}}-{{index}}</li>
	  </ul>
    <div class="">
      {{rawHtml}}
    </div>
    <div class="" :class="{red: isRed}" v-html="rawHtml">
    </div>
    <div class="" :class="['green']" v-html="rawHtml">
    </div>
    <div class="parent" @click.capture="sayHi('parent')">
      <div class="" :class="['red']" @click="sayHi('lixuan', $event)">
        点我吧
      </div>
    </div>
    <div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }" v-html="rawHtml"></div>

  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      isRed: true,
      title: 'i am h title',
      rawHtml: '<span v-bind:title="msg">sdfsfdsfdsfds</span>',
      msg: 'welcome to Your Vue.js App',
      activeColor: '#f0f',
      fontSize: '40',
      list: [
				{	text: 'hello1',show: true, red: false},
				{	text: 'world', show: false, red:true},
        {	text: 'xian', show: true, red: true}
			],
			objects: {
				age: 18,
				name: 'sharonli',
				gender: 'femail'
			}
    }
  },
  mounted: function() {
    const vm = this;
    setInterval( function() {
      vm.isRed = !vm.isRed;
    }, 1000);
  },
  methods: {
    getTime: function() {
      return new Date();
    },
    sayHi: function(name, event) {
      // event.preventDefault();
      alert(`hi ${name} ~!`);
    }

  },
  computed: {
    getTime: function() {
      return new Date();
    },
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.msg.split('').reverse().join('')
    }
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    },
    limit: function(value, len=Infinity) {
      if (!value) return '';
      const shadowValue = value.toString();
      return shadowValue.length < len ? shadowValue : `${shadowValue.substr(0, len)}...`;
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  font-size: 30px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}
li.divider {
  display:block;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
a {
  color: #42b983;
}
</style>
